<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>摇一摇 嗨一嗨</title>
    <style>
        .bostCont {
            position: fixed;
            width: 100%;
            height: 100%;
        }

        .bostCont img {
            display: block;
            margin: 30% auto;
        }
    </style>

</head>

<body>
<div class="bostCont">
    <img src="../static/shake/img/timg.gif" />

    <strong>    <!-- 摇一摇的声音 -->
        <audio src="../static/shake/music/red-01.mp3" preload="preload" id="shakingAudio"></audio>
        <!-- 摇到红包的声音 -->
        <audio src="../static/shake/music/red-02.mp3" preload="preload" id="shakingResult"></audio>
    </strong>

</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
   // document.addEventListener('plusready', function() {
        //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
        //运动事件监听
        if(window.DeviceMotionEvent) {
            window.addEventListener('devicemotion', deviceMotionHandler, false);
        }

        //获取加速度信息
        //通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。
        //而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。
        var SHAKE_THRESHOLD = 4000;
        var last_update = 0;
        var x, y, z, last_x = 0,
            last_y = 0,
            last_z = 0;

        function deviceMotionHandler(eventData) {
            var acceleration = eventData.accelerationIncludingGravity;
            var curTime = new Date().getTime();
            if((curTime - last_update) > 10) {
                var diffTime = curTime - last_update;
                last_update = curTime;
                x = acceleration.x;
                y = acceleration.y;
                z = acceleration.z;
                var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
                if(speed > SHAKE_THRESHOLD) {
                    $('#shakingAudio').trigger('play');
                    sendmessage();
                }
                last_x = x;
                last_y = y;
                last_z = z;
            }
        }
        
        function sendmessage() {
            $.ajax({
                type:"get",
                url:"/message/send?username=system&message=1",
                async:true,
                success:function () {
                    //alert("调用成功"); // Do something
                },
                error:function () {
                    //alert("调用失败");
                }
            });

        }
   // });
</script>
</body>

</html>
